<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <!-- 搜索区 -->
      <el-form  ref="refresh_ref" :model="query_info" :rules="refresh_rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="申诉状态" prop="status">
              <el-select v-model="query_info.status" placeholder="请选择申诉状态" clearable @clear="get_list()">
                <el-option label="申诉中" value="0"></el-option>
                <el-option label="通过" value="1"></el-option>
                <el-option label="驳回" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="申诉时间" prop="created_at">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.created_at" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="处理时间" prop="updated_at">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.updated_at" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="info" @click="$router.go(-1)">返回</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border>
        <el-table-column align="center" label="编号" prop="id" width="80" fixed="left" sortable></el-table-column>
        <el-table-column align="center" label="申诉内容" prop="content" width="200"></el-table-column>
        <el-table-column label="申诉图片" align="center" prop="image_url" width="200">
          <template slot-scope="scope">
            <el-image class="list_image" :src="scope.row.images[0]" :preview-src-list="scope.row.images">
              <div slot="error" class="image-error">暂无图片</div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单状态" prop="status_name" width="100"></el-table-column>
        <el-table-column align="center" label="申诉结果" prop="return_content" width="200"></el-table-column>
        <el-table-column align="center" label="申诉时间" prop="created_at" width="200" sortable></el-table-column>
          <el-table-column align="center" label="处理时间" prop="updated_at" width="200" sortable></el-table-column>
          <el-table-column align="center" label="操作" width="200" fixed="right">
            <template slot-scope="scope">

              <el-button type="primary" v-if="scope.row.status===0" :disabled="order_complain_btn" icon="iconfont icon-bianji" size="mini" @click="order_complain(scope.row.id)">处理</el-button>
            </template>
          </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination @size-change="handle_size_change" @current-change="handle_current_change" :total="total" :layout="layout" :current-page="query_info.page" :page-sizes="page_sizes" :page-size="query_info.pagesize"></el-pagination>
    </el-card>
    <!-- 编辑地址对话框 -->
    <el-dialog title="编辑地址" :visible.sync="edit_dialog_visible" :width="percentage_width" @close="edit_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="edit_form" :rules="rules"  ref="edit_ref">
        <el-form-item label="申诉结果" prop="return_content">
          <el-input type="textarea" placeholder="请输入申诉结果" maxlength="100" clearable show-word-limit v-model="edit_form.return_content"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="edit_dialog_visible = false">取 消</el-button>
          <el-button :disabled="order_complain_btn" type="primary" @click="edit_send(2)">驳回</el-button>
          <el-button :disabled="order_complain_btn" type="primary" @click="edit_send(1)">通过</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      order_complain_btn: this.is_string('shop/order/order_complain'), // 处理按钮是否禁用
      page_sizes: this.$config.page_sizes, // 分页条数列表
      layout: this.$config.layout, // 表格分页组件配置
      query_info: {
        id: this.$route.query.id,
        status: '', // 申诉状态
        created_at: [], // 申诉时间
        updated_at: [], // 处理时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize// 每页显示条数
      },
      list: [], // 列表数据
      total: 0, // 总数据条数
      refresh_rules: { status: [], created_at: [], updated_at: [] },
      // 处理对话框是否显示
      edit_dialog_visible: false,
      edit_form: {
        id: '',
        return_content: '',
        status: ''
      },
      rules: {
        return_content: [
          { required: true, message: '请输入申诉结果！', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.get_list()
  },
  methods: {
    // 获取列表
    get_list () {
      this.$base.request({
        that: this,
        url: 'shop/order/order_complain_list',
        data: this.query_info
      }, (res) => {
        if (res.code === 8888) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 刷新
    refresh () {
      this.$refs.refresh_ref.resetFields()
      this.get_list()
    },
    // 当前每页多少条选择
    handle_size_change (pagesize) {
      this.query_info.pagesize = pagesize
      this.get_list()
    },
    // 当前页码
    handle_current_change (page) {
      this.query_info.page = page
      this.get_list()
    },
    // 处理对话框打开
    order_complain (id) {
      this.edit_form.id = id
      this.edit_dialog_visible = true
    },
    // 提交处理数据
    edit_send (status) {
      this.edit_form.status = status
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'shop/order/order_complain',
            data: this.edit_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.edit_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    },
    // 监听处理对话框的关闭事件
    edit_dialog_close () {
      this.$refs.edit_ref.resetFields()
    }
  }
}
</script>
